<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#container{
				width: 960px;

				position: absolute;
				left: 50%;
				margin-left: -480px;
			}
			
			.advert{
				width: 640px;
				height: 200px;
				background-image: url(img/1.jfif);
				margin-top: 20px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="result" align="center">
			<table>
				<tr>
					<th>广告ID</th>
					<th>点击量</th>
				</tr>
				<tr>
					<td>1</td>
					<td>点击量</td>
				</tr>
				<tr>
					<td>2</td>
					<td>点击量</td>
				</tr>
				<tr>
					<td>3</td>
					<td>点击量</td>
				</tr>
				<tr>
					<td>4</td>
					<td>点击量</td>
				</tr>
				<tr>
					<td>5</td>
					<td>点击量</td>
					td
				<tr>
					<td>6</td>
					<td>点击量</td>
				</tr>
			</table>
		</div>
		<div id="container" align="center">

		</div>

		<script src="js/jquery.js"></script>
		<script>
			$(function () {
				//发送请求查询所有的广告信息
				$.ajax({
					method:"POST",
					url:"findAllAdverts",
					success:function (data) {
						// alert(data)
						var jsonArr = JSON.parse(data);
						$.each(jsonArr, function (index, json) {
							$("#container").append("<div class='advert' id='"+json.id+"'>"+json.name+"</div>")
							$(".advert:last-child").css("background-image", "url("+json.path+")")
						});
						$(".advert:last-child").css("margin-bottom", "100px")
						$(".advert").on("click", this, function(){
							$.ajax({
								method: "POST",
								url: "clickAdvert",
								data:{
									"id":$(this).attr("id")
								},
								success:function(data){
									console.log("写入到kafka:"+data)
								}
							})
						});
					}
				});
			});
			function getAllClickCount() {
				$.ajax({
					method:"POST",
					url: "findAllAdverts",
					success:function (data) {
						var jsonArr = JSON.parse(data);
						$.each(jsonArr, function (index, json) {
							//把点击量取出来在对应表格显示
							$("tr:eq(" + (index + 1)+") td:eq(1)").text(json.count)
						})
					}
				});
			}
			//定义一个定时器
			setInterval("getAllClickCount()", 300)
		</script>
	</body>
</html>
